import { getAppData, setGlobalData } from '@utils/tools'
import { AtTabs, AtTabsPane, AtImagePicker } from "taro-ui"
import { BasePage } from '@common/components/base-page'
import NavigationBar from '@components/navBar'
import { v4 as uuidv4 } from 'uuid';
import { getUuid } from '@utils/tools'
import Modal from '@components/modal'
import TaskCheck from '@components/task-check'
import Taro from '@tarojs/taro';
import Jump from '@utils/jump'
import AppRoute from '@utils/route/index'
import { View, Image, Text, Input, Textarea, Radio, Button, ScrollView } from '@tarojs/components'
import CommonTabs from '@components/common-tabs'
import style from './index.module.scss'
import '../../../assets/style/external.scss'
import link from '../../../assets/img/link.png'
import question from '../../../assets/img/question.png'
interface IProps {
}
interface IState {
    files: any,
    refuse: boolean,
    pageList: any,
    isSuccess: boolean,
    isContentOpen: boolean,
    forms: any
}
export default class SubmitTask extends BasePage<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            refuse: false,
            isContentOpen: false,
            files: [],
            forms: [
                { id: getUuid(), data: {} }
            ], // 存储每个表单的唯一标识  
            pageList: [
                { title: '任务页面', val: 'https://live.douyin', key: 0 },
                { title: '阅读量', val: '20', key: 1 },
                { title: '点赞量', val: '1', key: 2 },
            ],
            isSuccess: false,
        }
    }
    componentDidShow() {
    }
    onChange(files) {
        console.log(files, 'files')
        this.setState({
            files
        })
    }
    onFail(mes) {
        console.log(mes, 'messss')
    }

    onImageClick(index, file) {
        console.log(index, file, 'imageClick')
        Taro.chooseImage({
            success(res) {
                const tempFilePaths = res.tempFilePaths
                Taro.uploadFile({
                    url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
                    filePath: tempFilePaths[0],
                    name: 'file',
                    formData: {
                        'user': 'test'
                    },
                    success(res) {
                        const data = res.data
                        //do something
                    }
                })
            }
        })
    }
    submitTask = () => {
        this.setState({
            isSuccess: true
        })

    }
    handleClose = () => {
        this.setState({
            isSuccess: false
        })
    }
    handleModalOpen = () => {
        this.setState({
            isContentOpen: true
        })
    }
    handleModalClose = () => {
        this.setState({
            isContentOpen: false
        })
    }
    renderForms() {
        return (
            this.state.forms.map(form => (
                <View key={form.id} className={style.forms}>
                    <View className={style.pageUrl}>
                        <Text className={style.desc}>复制并粘贴任务页面链接到下方</Text>
                        <Input type='text' placeholder='请输入任务页面链接' placeholderClass={style.place} focus />
                    </View>
                    <View className={style.statisticsNum}>
                        <View className={style.sortNum}>
                            <Text className={style.desc}>阅读量</Text>
                            <Input type='text' placeholder='请输入阅读量' placeholderClass={style.place} focus />
                        </View>
                        <View className={style.sortNum}>
                            <Text className={style.desc}>点赞量</Text>
                            <Input type='text' placeholder='请输入点赞量' placeholderClass={style.place} focus />
                        </View>
                    </View>
                    <View className={style.pageUrl}>
                        <View className={style.flex}>
                            <Text className={style.desc} style="padding-bottom:0px">内容截图</Text>
                            <Image onClick={this.handleModalOpen} src={question}></Image>
                        </View>
                        <AtImagePicker
                            length={5}
                            files={this.state.files}
                            onChange={this.onChange.bind(this)}
                            onFail={this.onFail.bind(this)}
                            onImageClick={this.onImageClick.bind(this)}
                        />
                    </View>
                </View>
            )
            )
        )
    }
    render() {
        const { pageList } = this.state
        const tabList = [{ title: '微信视频号',key:'0' }, { title: '小红书',key:'1' }, { title: '抖音',key:'2' }, { title: '快手',key:'3' }, { title: '微博',key:'4' }, { title: 'bilibili',key:'5' }]

        const addLink = () => {
            const newFormId = getUuid(); // 生成新的唯一 ID  
            this.setState(prevState => ({
                forms: [...prevState.forms, {id:newFormId}],
            }));
        }
        return (
            <>
                {/* 审核中 */}
                <ScrollView enhanced={true} scrollY={true} style={{ height: '100vh' }}>
                    <NavigationBar backPageShow={true} titleColor="black" barBackgroundColor='white' title="提交任务"></NavigationBar>
                    <CommonTabs tabList={tabList} tabPlatform={true} />
                    {/* 通过或未通过 */}
                    {/* <TaskCheck /> */}
                    {/* <View className={style.forms}>
                        <View className={style.pageUrl}>
                            <Text className={style.desc}>复制并粘贴任务页面链接到下方</Text>
                            <Input type='text' placeholder='请输入任务页面链接' placeholderClass={style.place} focus />
                        </View>
                        <View className={style.statisticsNum}>
                            <View className={style.sortNum}>
                                <Text className={style.desc}>阅读量</Text>
                                <Input type='text' placeholder='请输入阅读量' placeholderClass={style.place} focus />
                            </View>
                            <View className={style.sortNum}>
                                <Text className={style.desc}>点赞量</Text>
                                <Input type='text' placeholder='请输入点赞量' placeholderClass={style.place} focus />
                            </View>
                        </View>
                        <View className={style.pageUrl}>
                            <View className={style.flex}>
                                <Text className={style.desc} style="padding-bottom:0px">内容截图</Text>
                                <Image onClick={this.handleModalOpen} src={question}></Image>
                            </View>
                            <AtImagePicker
                                length={5}
                                files={this.state.files}
                                onChange={this.onChange.bind(this)}
                                onFail={this.onFail.bind(this)}
                                onImageClick={this.onImageClick.bind(this)}
                            />
                        </View>
                    </View> */}
                    {this.renderForms()}
                    <Modal info="success" close={this.handleModalClose.bind(this)} isContentModal={this.state.isContentOpen} />
                    <View className={style.urls}>
                        <Button onClick={addLink}><Image src={link}></Image><Text>添加链接</Text></Button>
                    </View>
                    <View className={style.btnSubmit}>
                        <Button onClick={this.submitTask.bind(this)} >提交任务</Button>
                    </View>
                </ScrollView>
                <Modal info="success" close={this.handleClose.bind(this)} isSuccess={this.state.isSuccess} />
            </>

        )
    }
}
